iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 2
1
AI & Data

D3.js資料視覺化的浪漫突進系列 第 2

Day02 D3js 周邊資源

  • 分享至 

  • xImage
  •  

D3 周邊資源

D3學習過程中,在需要快速產出圖表的時候或剛起步學習時,官方直接的API文件是相當乏味的,因此此篇會大概介紹,哪邊有適合的圖表範例可以查詢或是學習資源。

官方資源

連結:https://github.com/d3/d3/wiki/Tutorials

官方提供的教學讓我們可以一步一步完成各種基礎圖表,並連結至Observable,讓我們開發時可以非常輕易了解,目前變數以及即時產出的圖表。

Observable

目前官方也把教學範例內容移置此平台,這類似D3的codepen,有即時預覽輸出的功能,當我們在寫D3或其他網頁UI相關的操作的時候,這是非常方便除錯,而且也能非常快速得到反應結果,可大幅提升開發速度。創辦人也是D3的作者,整個就是他的天地!

我們可以一邊打Code,寫下註解,並直接產生內容!

豐富的作品

當然也能觀摩各大神公開的作品,透過看別人怎麼寫,來精進自己D3的能力,跟codepen的瀏覽功能非常相似。

其他相關資源

  • bl.ocks.org
    透過連結的方式,可以直接讀取gist.github上的圖表範例,這邊也有許多強者的圖表範例,也適合搜尋自己需要的圖表。

  • christopheviau D3.js Gallery
    此網站內有2490個範例,我也有部分的特殊案例是在此找到類似範例,但年代有點久,可能有部分API需要注意是否過時。

  • d3-graph-gallery
    此網站也有不少可直接參考的範例,圖表完整,呈現的樣式效果都滿不錯的,不會太粗糙。

特別的資源

許多強者都叫Mike! D3的作者就是Mike Bostock,此兩個站就是Mike寫的一系列D3圖表範例。

總結

上面看起來沒有甚麼強而有力的0-1教學文章,因為我也沒有找到,但透過看別人的範例,實際了解API使用,並且融會貫通概念,在API更動後其實仍然很快可以上手,比起直接看一整個列表的API,學習的愉悅程度差別很大!

參考資源

連結皆在文章內


上一篇
Day01 D3js
下一篇
Day03 D3js 基本SVG
系列文
D3.js資料視覺化的浪漫突進30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
老屁股
iT邦新手 5 級 ‧ 2020-09-17 22:18:03

特別的資源 許多強者都叫Mike! D3的作者就是Mike Bostock,此兩個站就是Mike寫的一系列D3圖表範例。

嚴重譴責 狗腿行為!!!

@wellwind

陳述事實!!

我要留言

立即登入留言